<!--  -->
<template>
    <div style="padding: 20px;">
        <div style="padding: 20px;">
            <el-card class="box-card" style="margin-bottom: 30px;">
                <template #header>
                    <div class="box_left">
                        <div>
                            <el-icon>
                                <Tickets />
                            </el-icon>
                        </div>
                        <div>
                            数据列表
                        </div>

                    </div>
                    <div>
                        <el-button type="primary" class="top_button" @click="addProductAttr">填加</el-button>
                    </div>
                </template>
            </el-card>

            <el-table :data="tableData" style="width: 100%" :border="true">
                <el-table-column prop="id" label="编号" width="100" />
                <el-table-column prop="name" label="类型名称" width="300" />
                <el-table-column prop="attributeCount" label="属性数量" width="180">
                </el-table-column>
                <el-table-column prop="paramCount" label="参数数量" width="120" />


                <el-table-column label="设置" width="200">
                    <template #default="scope">
                        <el-button type="default" size="small" class="left_button" @click="goToList(scope.row.id,0,scope.row.name)">属性列表
                        </el-button>

                        <el-button type="default" size="small" class="left_button" @click="goToList(scope.row.id,1)">参数列表</el-button>



                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="editProductCateAttr(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="onDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>


            <!-- 分页器 -->
            <el-pagination v-model:currentPage="pagination.pageNum" v-model:page-size="pagination.pageSize"
                :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            <Edit :visible="visible" :form="modalForm" @cancel="onCloseDialog" @confirm="onConfirmDialog"></Edit>

        </div>
    </div>


</template>

<script lang='ts' setup>
import { Tickets } from "@element-plus/icons-vue";
import { reactive, toRefs, ref } from 'vue'
import useTable from "@/hooks/useTable"
import * as api from "@/request/api"
import { useRouter } from "vue-router";
import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/message-box/style/css'
import { ElMessage, ElMessageBox } from 'element-plus'
import Edit from "./EditProductAttr.vue"
 let router=useRouter()

let {
    tableData,
    pagination,
    handleCurrentChange,
    handleSizeChange,
    getTableData
} = useTable(api.product.productCateAttrList)


//填加商品类型
let addProductAttr = () => {
    ElMessageBox.prompt(`类型名称`, '填加类型', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    })
        .then(({ value }) => {
            let form = new FormData()
            form.append('name', value)
            api.product.productCateAttrCreate(form)
            ElMessage({
                type: 'success',
                message: '填加成功',
            })
            getTableData()
        })
}

//编辑商品类型
let visible = ref(false)
let modalForm = ref({})
let editProductCateAttr = (row: any) => {
    modalForm.value = row
    visible.value = true
}
let onCloseDialog = () => {
    visible.value = false
}

let onConfirmDialog = (row) => {
    //弹出二次确认框
    ElMessageBox.confirm(
        '是否确认提交?',
        '提示',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            await api.product.productCateAttrUpdate({
                id:row.id,
                name:row.name
            })
                getTableData()
                ElMessage({
                    type: 'success',
                    message: '操作成功',
                })
           
            visible.value = false
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}








//删除商品类型
let onDelete = (id) => {
    ElMessageBox.confirm(
        '是否要删除该品牌?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await api.product.productCateAttrDelete({ id })
            getTableData()
            ElMessage({
                type: 'success',
                message: 'Delete completed',
            })
        })

}


//点击属性列表或参数列表的跳转
let goToList=(id:number,type:number,name:string)=>{
    router.push(`productAttrList?id=${id}&type=${type}&name=${name}`)
}


</script>

<style scoped>
:deep .el-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box_left {
    display: flex;
}

.el-pagination {
    display: flex;
    justify-content: right;
}

:deep .cell {
    text-align: center;
}




:deep .el-table__header {
    width: 100% !important;
}

:deep .el-table__body {
    width: 100% !important;
}
</style>